<template>
  <header class="bg-white border-b border-gray-200 px-4 py-3 flex items-center justify-between">
    <!-- 移动端菜单按钮 -->
    <button
      v-if="isMobile"
      @click="$emit('toggle-sidebar')"
      class="p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary-500"
    >
      <Bars3Icon class="h-6 w-6" />
    </button>

    <!-- 标题 -->
    <div class="flex-1 min-w-0">
      <h1 class="text-lg font-medium text-gray-900 truncate">
        {{ title }}
      </h1>
    </div>

    <!-- 操作按钮 -->
    <div class="flex items-center space-x-2">
      <!-- 这里可以添加更多操作按钮 -->
    </div>
  </header>
</template>

<script setup lang="ts">
import { Bars3Icon } from '@heroicons/vue/24/outline'

interface Props {
  title: string
  isMobile: boolean
}

interface Emits {
  (e: 'toggle-sidebar'): void
}

defineProps<Props>()
defineEmits<Emits>()
</script> 